<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>家庭医生签约管理系统</title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		@media only screen and (min-width:960px){
			body{
				min-height: 100vh;
				background-image: linear-gradient(to bottom,#26cee4,#4ddb99);
				display: flex;
				justify-content: center;
				flex-flow: column;
			}
			.content{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 1 0 auto;
				animation: back_color;
				animation-duration: 5s;
				animation-iteration-count: 2;
				animation-timing-function: linear;
				animation-direction: alternate;
				animation-iteration-count: infinite;
			}
			.sys_name{
				color: lightblue;
				font-size: 50px;
				font-weight: 500;
				display: flex;
				justify-content: center;
			}
			.download{
				display: flex;
				justify-content: center;
			}
			.download button{
				border: none;
				padding: 10px;
				margin: 10px;
				border-radius: 10px;
				box-shadow: 0 0 10px gainsboro;
				background-image:linear-gradient( to left,#26cee4,#4ddb99);
			}
			.download button a{
				text-decoration: none;
			}
			.logo{
				display: flex;
				justify-content: center;
			}
			.download button:hover{
				transform: scale(1.2);
				transition: all 1.5s;
			}
			.foot{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: lightblue;
				flex: 0 0 auto;
				font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
			}
			.xy{
				text-align: center;
				font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
				color: lightblue;
				font-size: 20px;
				margin: 5px;
			}
			
			.color{
					animation: color;
					animation-duration: 1s;
					animation-iteration-count: 2;
					animation-timing-function: linear;
					animation-direction: alternate;
					/* animation-iteration-count: infinite; */
				}
				
				@keyframes color{
					50%{
						color: bisque;
						transform: scale(1.2);
					}
					to{
						color: coral;
						transform: scale(1.5);
					}
				}
				@keyframes back_color{
					25%{
						background-image:linear-gradient( to left,#26cee4,#4ddb99);
					}
					50%{
						background-image:linear-gradient( to bottom,#26cee4,#4ddb99);
					}
					75%{
						background-image:linear-gradient( to top,#26cee4,#4ddb99);
					}
					to{
						background-image:linear-gradient( to right,#26cee4,#4ddb99);
					}
				}
			}
		
		@media only screen and (max-width:960px){
			body{
				min-height: 100vh;
				background-image: linear-gradient(to bottom,#26cee4,#4ddb99);
				display: flex;
				justify-content: center;
				flex-flow: column;
			}
			.content{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 1 0 auto;
				animation: back_color;
				animation-duration: 5s;
				animation-iteration-count: 2;
				animation-timing-function: linear;
				animation-direction: alternate;
				animation-iteration-count: infinite;
			}
			.sys_name{
				color: lightblue;
				font-size: 50px;
				font-weight: 500;
				display: flex;
				justify-content: center;
			}
			.download{
				display: flex;
				justify-content: center;
			}
			.download button{
				border: none;
				padding: 20px;
				margin: 10px;
				border-radius: 10px;
				box-shadow: 0 0 10px gainsboro;
				background-image:linear-gradient( to left,#26cee4,#4ddb99);
			}
			.download button a{
				text-decoration: none;
			}
			.logo{
				display: flex;
				justify-content: center;
			}
			.download button:hover{
				transform: scale(1.2);
				transition: all 1.5s;
			}
			.foot{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: lightblue;
				flex: 0 0 auto;
				font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
			}
			.xy{
				text-align: center;
				font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
				color: lightblue;
				font-size: 20px;
				margin: 5px;
			}
			
			.color{
					animation: color;
					animation-duration: 1s;
					animation-iteration-count: 2;
					animation-timing-function: linear;
					animation-direction: alternate;
					/* animation-iteration-count: infinite; */
				}
				
				@keyframes color{
					50%{
						color: bisque;
						transform: scale(1.2);
					}
					to{
						color: coral;
						transform: scale(1.5);
					}
				}
				@keyframes back_color{
					25%{
						background-image:linear-gradient( to left,#26cee4,#4ddb99);
					}
					50%{
						background-image:linear-gradient( to bottom,#26cee4,#4ddb99);
					}
					75%{
						background-image:linear-gradient( to top,#26cee4,#4ddb99);
					}
					to{
						background-image:linear-gradient( to right,#26cee4,#4ddb99);
					}
				}
		}
	</style>
	<body>
		<div class="content">
			<div class="logo">
				<img src="./img/logo.png" alt="">
			</div>
			<div class="title">
				<div class="sys_name">
					<span class="color">家</span>&nbsp;
					<span class="color">医</span>&nbsp;
				</div>
				<div class="xy">
					<p>签约家庭医生，用爱呵护健康</p>
				</div>
			</div>
			<div class="download">
				<button><a href="http://123.56.67.48/Doc_page/static/5-12.apk">APP 下载</a></button>
			</div>
			
		</div>
		<div class="foot">
			<p>copyright ©2019-2020</p>
			<p>韩天江 刘威 李秦龙</p>
		</div>
	</body>
</html>
